<template>
  <a-tree-select
    :value="v"
    show-search
    :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
    allow-clear
    tree-default-expand-all
    :tree-data="gData"
    searchPlaceholder="关键字搜索"
    v-bind="$attrs"
    v-on="$listeners"
    @change="handleChange"
  >
  </a-tree-select>
</template>

<script>
const gData = [
  {
    value: '文化建设',
    label: '文化建设'
  },
  {
    value: '政治建设',
    label: '政治建设',
    children: [
      {
        value: '政治建设1',
        label: '政治建设1'
      },
      {
        value: '政治建设2',
        label: '政治建设2'
      }
    ]
  },
  {
    value: '社会建设',
    label: '社会建设'
  }
]

export default {
  props: {
    v: {
      type: String,
      default: undefined
    }
  },
  data() {
    return {
      gData
    }
  },
  model: {
    prop: 'v',
    event: 'changev'
  },
  methods: {
    handleChange(value) {
      this.$emit('changev', value)
    }
  }
}
</script>
<style lang="less" scoped>
/deep/ .ant-select-selection {
  height: 100%;
  border-radius: 0px;
}
/deep/ .ant-select-selection__rendered {
  line-height: 34px;
}
.ant-select {
  vertical-align: top;
}
</style>